import React from 'react';
import {SafeAreaView, Button} from 'react-native';
import MapboxGL, {
  MapView,
  ShapeSource,
  LineLayer,
  Camera,
} from '@react-native-mapbox-gl/maps';

import accessToken from './accesstoken.json';

MapboxGL.setAccessToken(accessToken);

const aLine = {
  type: 'LineString',
  coordinates: [[-74.00597, 40.71427], [-74.00697, 40.71527]],
};

class BugReportExample extends React.Component {
  render() {
    return (
      <SafeAreaView style={{flex: 1, flexDirection: 'column'}}>
        <Button
          title="fitBounds"
          onPress={() => {
            this.camera.fitBounds(
              [-74.00597, 40.71427],
              [-74.00697, 40.71527],
              [0, 0, 300, 0],
            );
          }}
        />
        <Button
          title="fitBounds2"
          onPress={() => {
            this.camera.fitBounds(
              [-74.00597, 40.71427],
              [-74.00697, 40.71527],
              [300, 0, 0, 0],
            );
          }}
        />
        <MapView style={{flex: 1}}>
          <Camera
            centerCoordinate={[-74.00597, 40.71427]}
            zoomLevel={14}
            ref={ref => {
              this.camera = ref;
            }}
          />
          <ShapeSource id="idStreetLayer" shape={aLine}>
            <LineLayer id="idStreetLayer" />
          </ShapeSource>
        </MapView>
      </SafeAreaView>
    );
  }
}

export default BugReportExample;